import React, { Component } from 'react';
import { Typography, Card } from 'antd';
import './index.less';

const { Title, Text } = Typography;

class Admin extends Component {
    state = {
        welcomeMessage: '今天是美好的一天，让我们开始愉快的工作吧！',
        userName: '张老师',
        currentTime: new Date(),
        greeting: ''
    };

    componentDidMount() {
        this.updateGreeting();
        // 每分钟更新一次时间
        this.timer = setInterval(() => {
            this.setState({ 
                currentTime: new Date()         
            }, this.updateGreeting);
        }, 60000);                                             
    }

    componentWillUnmount() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }

    updateGreeting = () => {
        const hour = new Date().getHours();
        let greeting = '';
        
        if (hour >= 5 && hour < 12) {
            greeting = '早上好';
        } else if (hour >= 12 && hour < 14) {
            greeting = '中午好';
        } else if (hour >= 14 && hour < 18) {
            greeting = '下午好';
        } else {
            greeting = '晚上好';
        }
        
        this.setState({ greeting });
    }

    render() {
        const { welcomeMessage, userName, currentTime, greeting } = this.state;

        return (
            <div className="welcome-container">
                <Card className="welcome-card">
                    <div className="welcome-header">
                        <Title level={2} className="welcome-title">
                            {greeting}
                            <span className="user-name">{userName}</span>
                        </Title>
                    </div>
                    <div className="welcome-content">
                        <Text className="welcome-text">
                            {welcomeMessage}
                        </Text>
                        <div className="welcome-time">
                            {currentTime.toLocaleString('zh-CN', {
                                hour12: false,
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                weekday: 'long'
                            })}
                        </div>
                    </div>
                </Card>
            </div>
        );
    }
}

export default Admin;
